<template>
    <div class="cashier-process">
        <div class="search-part">
            <el-row :gutter="20" class="search-part-row">
                <el-col :span="13">
                    <div class="grid-content">
                        <v-simpsearch class="simple-search" v-show="search" @transferParam="getParam"></v-simpsearch>
                    </div>
                </el-col>
                <el-col :span="11">
                </el-col>
            </el-row>
        </div>
        <div class="process step-layout" v-loading="loading">
            <steps :current="current" type="line" :show-footer="false" class="line-bottom">
                <step title="" description="选择充值活动">
                    <keep-alive>
                        <!--@transferGoodItem="getGoodItem"-->
                        <waterfall id="myDIV" v-if="currentIsActivity"
                                   :line-gap="250"
                                   :max-line-gap="360"
                                   :min-line-gap="160"
                                   :watch="items"
                                   :fixed-height="true"
                                   align="center">
                            <!-- each component is wrapped by a waterfall slot -->
                            <waterfall-slot
                                    v-for="(item, index) in items"
                                    :width="200"
                                    :height="160"
                                    :order="index"
                                    :key="item.id"
                            >
                                <div  @dblclick.stop="handleNext">
                                    <v-billcomp
                                            :item="item"
                                            :index="index"
                                            class="item"
                                            :backSelectItems="selectItems"
                                            :backItems="getCurrentSelectItems"
                                            :viewClick="function(){info(item)}"
                                            :currentRadio ="currentRadio"
                                            :isGoods="isGoods"
                                    >
                                        <!--:buttonText="buttonText"-->
                                        <div class="text">

                                            <h6 class="l1">{{item.name}}</h6>
                                            <span class="l1 remark">{{item.remark || '暂无'}}</span>
                                            <span class="l1"><span class="span1">单价</span>{{ Number(item.price || 0).toFixed(2) }}</span>
                                        </div>
                                    </v-billcomp>
                                </div>

                            </waterfall-slot>
                        </waterfall>
                    </keep-alive>
                    <div class="step-fixed">
                        <button class="button is-info c-def" @click="handleNext">下一步</button>
                        <button class="button is-info c-def" v-show="isList" @click="toList" >去充值</button>
                    </div>
                </step>


                <step title="" description="选择会员">
                    <keep-alive>
                        <v-select-member
                                v-if="currentIsMember"
                                @transfer="getCurrent"
                                :param="param"
                                :dblNextClick="handleNext2"
                        ></v-select-member>
                    </keep-alive>
                    <div class="step-fixed">
                        <button class="button is-info c-def" @click="handlePrev1">上一步</button>
                        <button class="button is-info c-def" @click="handleNext2">下一步</button>
                    </div>
                </step>


                <step title="" description="充值清单">
                    <keep-alive>
                        <v-select-record v-if="currentIsSelectRecord"
                                         :selectMember="selectMember" :selectActivity="selectActivity"
                                         :actItem="actItem" @changeMember="getMemberPage" @changeActivity="getActivityPage"
                                         @changePage="toHomePage"
                                         ></v-select-record>
                    </keep-alive>
                    <div class="step-fixed">
                        <button class="button is-info c-def" @click="handlePrev2">上一步</button>
                    </div>
                </step>
            </steps>
        </div>

    </div>
</template>

<script>
    import vSelectMember from './SelectMember.vue';
    import vSelectRecord from './DepositList.vue';
    import vSimpsearch from '../SimpSearch.vue';
    import Waterfall from 'vue-waterfall/lib/waterfall.vue';
    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot';
    import * as type from '../../../store/types';
    import vBillcomp from '../../common/BillComp.vue';

    export default {
        name:'keepalive-false',
        components: {
            vBillcomp,vSimpsearch, vSelectMember, vSelectRecord, Waterfall, WaterfallSlot
        },
        data() {
            return {
                current: 0,
                items: [],
                list: [],
                loading: true,
                allItems: [],
                rows: 20,//显示数量
                page: 1,//当前页数
                totalPage: 1,//总页数
                goodItem: [],
                selectMember: [],
                selectActivity: {},
                activityItem:[],
                search:true,
                radio:'',
                isList:false,
                param: '',
                actItem:{},
                static_url: this.$cfg.static_url + "/",
                c: {},
                isMultiselect: false,
//                buttonText: '查看',
                isGoods: true,
                selectItems:[],
                currentRadio: {index:-1},
                currentUser:{},
            };
        },
        computed: {
            currentIsActivity: function () {
                if (this.current == 0) {
                    return true;
                }
            },
            currentIsMember: function () {
                if (this.current == 1) {
                    return true;
                }
            },
            currentIsSelectRecord(){
                if (this.current == 2) {
                    return true;
                }
            }
        },
        watch: {
            param(val){
                this.items = [];
                this.page = 1;
                this.totalPage = 1;
                this.loadMore();
            }
        },
        created:function () {
            this.loadMore();
        },
        activated: function () {
            this.current=0;
            this.$$(window).resize();
            this.$$("#content").scrollTop(0)
        },
        deactivated:function () {

            this.$$("#content").off('scroll');
        },
        mounted: function () {
            console.log("mounted==================")
            this.currentUser = JSON.parse(localStorage.getItem("currentUser"));
            console.log(this.current)
            this.$$("#content").scrollTop(0)
            let self = this;
            this.$$("#content").on('scroll', function (e) {
                var scrollTop = self.$$("#content").scrollTop();
                var innerHeight = self.$$("#content").innerHeight();
                var scrollHeight = self.$$("#content").scrollHeight();
                if (scrollTop + innerHeight >= scrollHeight) {
                    self.page++;
                    if (self.page > self.totalPage) {
                        return;
                    }
                    self.loading = true;
                    self.loadMore();
                    console.log('*(******************' + self.page)
                }
            })
            document.getElementById("myDIV").addEventListener('wheel', function (e) {
                if (e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0) {
                    console.log(e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0)
                    self.page++;
                    self.loading = true;
                    self.loadMore();
                }
            });
            this.$$(window).resize();
        },
        methods: {
            loadMore: function () {
                console.log("==============>loadMore")
                let self = this;
                if (this.page <= this.totalPage) {
                    this.$axioxs.get("/goods_package/?states=1&kindCode=20&rows=" + this.rows + "&page=" + this.page + "&param=" + this.param)
                        .then(function (res) {
                                self.totalPage = res.data.totalPage;
                                self.allItems = res.data.records;
                                self.allItems.forEach(item => {
                                    item.height = 220;
                                    item.width = 220;
                                    self.items.push(item);
                                });
                                self.loading = false;
                            },
                            (res) => {
                                this.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            });
                } else {
                    this.allData = true;
                    this.loading = false;
                }
            },
            toList:function () {
                this.param = '';
                this.current = 2;
                this.actItem = this.selectActivity.entries;
                this.$$(window).resize();
                this.$$("#content").scrollTop(0)
            },
            toHomePage(res){
                this.param = '';
                this.current = 0;
                this.$$(window).resize();
                this.$$("#content").scrollTop(0)
            },
            getActivityPage(res) {
                this.param = '';
                this.current = 0;
                this.isList = true;
                this.$$(window).resize();
                this.$$("#content").scrollTop(0)
            },
            getMemberPage(res) {
                this.param = '';
                this.current = 1;
                this.$$(window).resize();
                this.$$("#content").scrollTop(0)
            },
            getCurrent(res) {
                this.selectMember = res;
            },
            handleNext() {
              let hasRights = this.currentUser.rights.find(obj=> obj === 'recharge_add')
              if(hasRights != 'recharge_add'){
                this.$message({
                    showClose: true,
                    message: '权限不足',
                    type: 'warning'
                });
                return;
              }
                this.$$(window).resize();
                this.$$("#content").scrollTop(0)
                this.param = '';
                if (this.selectActivity.id) {
                    this.current <= 2 && this.current++;
                    this.actItem = this.selectActivity.entries;
                }else{
                    this.$message({
                        showClose: true,
                        message: '请选择充值活动',
                        type: 'error'
                    });
                }

            },
            handleNext2() {
                this.$$(window).resize();
                this.$$("#content").scrollTop(0)
                this.param = '';
                if (this.selectMember.id) {
                    this.current <= 2 && this.current++;
                }else{
                    this.$message({
                        showClose: true,
                        message: '请选择要充值的会员',
                        type: 'error'
                    });
                }

            },
            handlePrev1() {
                this.$$(window).resize();
                this.$$("#content").scrollTop(0)
                this.param = '';
                this.current >= 0 && this.current--;
            },
            handlePrev2() {
                this.$$(window).resize();
                this.$$("#content").scrollTop(0)
                this.param = '';
                this.current >= 0 && this.current--;
                this.isList=true;
            },
            info: function (item) {
                console.log(item)
            },
            getCurrentSelectItems: function (items) {
                this.selectActivity=items;
            },
            getParam(res){
                if(this.current=='0'){
                    this.search=true;
                    this.param = res;
                    this.$$("#content").scrollTop(0)
                }else if(this.current=='1'){
                    this.search=true;
                    this.param = res;
                    this.$$("#content").scrollTop(0)
                }else if(this.current=='2'){
                    this.search=false;
                }

            },

        }
    };
</script>

<style scoped>
    .line-bottom{
        border-bottom: none;
    }
    .member-layout{
        overflow-x: hidden;
    }
    .process{
        padding: 80px 0 0 0;
    }
    .step-fixed {
        width: 100%;
        position: fixed;
        bottom: 0;
        padding-top: 20px;
        padding-bottom: 20px;
        background: #000;
        opacity: 0.6;
        z-index: 3;
        margin-left: -20px;
    }

    .step-fixed button{
        margin-left: 30px;
        font-size: 16px;
        padding-left: 25px;
        padding-right: 25px;
        height:35px;
    }

    .line .step-item .step-description {
        position: absolute;
        width: 100px;
        left: -15px !important;
        padding-top: 10px !important;
    }

    .step-header {
        padding-left: 40px !important;
    }

    .step-panel {
        padding-top: 20px;
    }

    .selected-result .result .el-input__inner:hover {
        border: 1px solid #cacaca;
    }
    .line-none{
        border-bottom: none;
    }
    .item {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        font-size: 1.2em;
        color: rgb(0, 158, 107);
    }

    .search-layout {
        padding: 10px;
        background-color: #fff;
    }

    .text {
        margin-bottom: 1em;
    }

    .text h6 {
        margin-bottom: 5px;
    }

    .span1 {
        background-color: #3eb3f9;
        border-radius: 20px;
        padding: 2px 5px;
        color: #fff !important;
        font-size: .8em;
        margin-right: 3px;
    }

    .span2 {
        background-color: #6699ff;
        border-radius: 20px;
        padding: 2px 5px;
        color: #fff !important;
        font-size: .8em;
        margin-right: 3px;
    }

    .remark {
        padding: 3px 0;
    }
    .c-def{
        cursor: default;
    }

</style>
